<template>

  <div class="container">
    <div class="container_head">
      <el-row :gutter="20">
        <el-col :span="6">
          <h3 class="ketang">班级管理</h3>
        </el-col>
        <el-col :span="8">
          <a @click="toAllClassesList" class="gengduo"><i class="el-icon-more"></i></a>
        </el-col>
      </el-row>
    </div>
    <div class="container_body">
      <el-row :gutter="20">
        <el-col :span="7">
          <div v-if="classesList.length == 0" class="container_body1_null" @click="toAllClassesList">
            暂无班级
          </div>
          <div v-else class="container_body1" @click="toClassAllStuList(classesList[0].classIdid)">
            <!--图片按钮-->
            <el-row class="card_container">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <img src="../../public/img/1.jpg" class="image">
                  <div style="padding: 14px;">
                    {{ classesList[0].className }}
                  </div>
                  <div class="num">
                    {{ classesList[0].totalStudent }} 人
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="container_body6">
            <el-row :gutter="20">
              <el-col :span="16">
                <h3 class="beike">课程管理</h3>
              </el-col>
              <el-col :span="8">
                <a @click="toCourseList" class="gengduo2"><i class="el-icon-more"></i></a>
              </el-col>
            </el-row>
          </div>
          <div class="container_body8" v-for="(course,index) in courseList" :key="index" v-if="index<2">
            <el-row>
              <el-col :span="8">
                <div>
                  <img src="img/6.jpg" style="height: 130px;">
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <h3 style="margin-top: 50px">{{ course.courceName }}</h3>
                </div>
              </el-col>
              <el-col :span="8">
                <div style="margin-top: 50px">
                  <el-button type="success" icon="el-icon-view" @click="getCourseInfo(course)" round>查看
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" @click="deleteCourseConfirm(course)" round>删除
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="7">
          <div class="container_body2" @click="toClassAllStuList(classesList[1].classIdid)">
            <!--图片按钮-->
            <el-row class="card_container" v-if="classesList.length > 1">
              <el-col :span="24">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <img src="../../public/img/1.jpg" class="image">
                  <div style="padding: 14px;">
                    {{ classesList[1].className }}
                  </div>
                  <div class="num">
                    {{ classesList[1].totalStudent }} 人
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>


        </el-col>

        <el-col :span="10">
          <div class="container_body4">
            <h4>通知管理</h4>
          </div>
          <div class="container_body5" @click="toGlobalNotice">
            <div class="null_notice" v-if="globalNoticeList.length == 0">点击查看详情</div>
            <div v-else v-for="(notice,index) in globalNoticeList" :key="index" class="simple_notice_wrap">
              <div class="simple_notice_title">{{ notice.noticeTitle }}</div>
              <div class="simple_notice_content">{{ notice.noticeContent.substring(0, 15) + '...' }}</div>
              <div class="simple_notice_time">{{ dateFormat(notice.updateTime) }}</div>
            </div>
          </div>
          <div class="container_body7">
            <h4 class="rili">日历</h4>
          </div>
          <div class="container_body10">
            <el-calendar v-model="value">
            </el-calendar>
          </div>
        </el-col>
      </el-row>
      <el-dialog :visible.sync="dialogTreeFlag" @close="dialogTreeFlag = false">
        <el-tree :data="courseDirList" :props="defaultProps" default-expand-all>

        </el-tree>
      </el-dialog>

      <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="20%" center @close="deleteDialogVisible = false">
        <span>此操作将永久删除该课程, 是否继续？</span>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="deleteDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleDelete()">确定</el-button>
                </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "UpdateStudent",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      //课程数组
      courseList: [],
      //全局通知列表
      globalNoticeList: [],
      //班级列表
      classesList: [],
      user: JSON.parse(window.localStorage.getItem('user')),
      value: new Date(),
      courseDirList: [],
      defaultProps: {
        children: 'children',
        label: 'dirName',
      },
      dialogTreeFlag: false,
      deleteDialogVisible: false,
      courseInfo: '',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    //跳转课程列表页面
    toCourseList() {
      this.$router.push({
        path: '/courseList',
      })
    },
    //跳转班级列表页面
    toAllClassesList() {
      this.$router.push({
        path: '/allClassesList'
      })
    },
    //下面是通知相关
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //跳转通知列表，通知类型为全局通知
    toGlobalNotice() {
      this.$router.push({
        path: '/noticeList',
        query: {
          noticeType: 0
        }
      });
    },
    //获取前两条全局通知
    getGlobalNotice() {
      const _this = this;
      axios.get('http://localhost:8080/notice/listGlobal/1/4').then(function (res) {
        _this.globalNoticeList = res.data.data.content
        console.log("_this.globalNoticeList");
        console.log(_this.globalNoticeList);
      })
    },//获取课程信息
    getCourseInfo(course) {
      var _this = this;
      console.log(course);
      axios.get("http://localhost:8080/courseDirectory/findCourseTreeByCourceId?courceId=" + course.courceId).then(function (res) {
        _this.courseDirList = res.data.data;
        console.log("课程目录");
        console.log(_this.courseDirList);
      });
      _this.dialogTreeFlag = true;
    },
    deleteCourseConfirm(course) {
      var _this = this;
      console.log("获取课程并弹窗");
      _this.courseInfo = course;
      console.log(_this.courseInfo);
      _this.deleteDialogVisible = true;
    },
    handleDelete() {
      // 处理删除逻辑
      var _this = this;
      console.log(_this.courseInfo.courceId);
      axios.delete('http://localhost:8080/courseMaster/deleteCourseByCourceId?courceId=' + _this.courseInfo.courceId).then(function (res) {
        if (res.data.code == 0) {
          console.log("删除成功！");
          _this.deleteDialogVisible = true;
        }
      })
      location.reload();
    },
    //获取前两条班级
    getAllCLasses() {
      const _this = this;
      //查询表单
      var querForm = {
        className: '',
        page: 1,
        size: 2
      }
      axios.post('http://localhost:8080/classes/findAllClassByName', querForm).then(function (res) {
        _this.classesList = res.data.data.content
        console.log("两条班级记录");
        console.log(_this.classesList);
      })
    },
    //跳转班级详情
    toClassAllStuList(classIdid) {
      const _this = this;
      this.$router.push({
        path: '/classAllStuList',
        query: {
          classIdid: classIdid
        }
      })
    }
  }, created() {
    const _this = this;
    //获取所有的课程
    axios.get("http://localhost:8080/courseMaster/findAllCourse").then(function (res) {
      _this.courseList = res.data.data;
      console.log("所有课程");
      console.log(_this.courseList);
    })
    //获取部分班级列表
    this.getGlobalNotice()
    //获取前两条班级
    this.getAllCLasses()
  }

}
</script>

<style scoped>


/*通知begin*/
.null_notice {
  font-size: 30px;
  text-align: center;
  line-height: 30px;
  color: snow;
}

.simple_notice_title {
  color: #f34545;
  font-weight: bold;
  font-size: 15px;
}

.simple_notice_content {
  margin-top: 2px;
  color: #000;
  font-size: 12px;
}

.simple_notice_time {
  text-align: right;
  /*margin: 10px;*/
  /*margin-right: 6px;*/
  padding-right: 10px;
  font-size: 2px;
  color: #888;
}

.simple_notice_wrap {
  background-color: white;
  width: 90%;
  margin: 10px auto;
  height: 50px;
  padding-top: 5px;
  padding-left: 20px;
  border-radius: 10px;
  /*border: 1px solid black;*/
}

/*通知end*/

.container {
  height: 570px;
  margin-bottom: 30px;
}

.container_head {

}

.ketang {
  margin-left: 50px
}

.gengduo {
  margin-left: 60px
}

.beike {
  margin-left: 150px;
}

.gengduo2 {
  margin-left: 180px;
  margin-top: 0px;
}

.rili {
  margin-right: 640px;
}

.container_body {

}

.container_body1 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  margin: 0px;
  padding: 0px;
  height: 350px;
  width: 350px;
  margin-left: 190px;
  /*background-color: white;*/
  shadow: hover;
}

.container_body1_null {
  margin: 0px;
  padding: 0px;
  height: 350px;
  width: 350px;
  margin-left: 190px;
  box-shadow: 0 2px 15px rgb(0, 0, 0);
  line-height: 300px;
  font-size: 50px;
  border-radius: 10px;
}

.container_body2 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  margin: 0px;
  padding: 0px;
  height: 350px;
  width: 350px;
  margin-left: 90px;
  /*background-color: white;*/
  shadow: hover;
}


.card_container:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}


.container_body3 {
  /*box-shadow: 0 10px 60px 0 rgb(69, 176, 255);*/
  /*text-align: center;*/
  height: 130px;
  width: 380px;
  margin-top: 1px;
  margin-right: 200px;
  background-color: white;
  padding: 20px;
  shadow: hover;
  margin-bottom: 20px;
}

/*.container_body3:hover {*/
/*  box-shadow: 0 2px 30px rgb(69, 176, 255);*/
/*  !*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .3)*!*/
/*}*/
.container_body4 {
  margin-right: 610px;
  margin-bottom: 20px;
  margin-top: -61px;
}

.container_body5 {
  text-align: left;
  height: 260px;
  width: 380px;
  margin-right: 100px;
  /*margin-right:60px;*/
  box-shadow: 0 2px 10px rgb(0, 0, 0);
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.container_body5:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body6 {

}

.container_body7 {

}

.container_body8 {
  height: 130px;
  width: 700px;
  margin-left: 190px;
  /*margin-right:60px;*/
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  color: black;
}

.container_body8:hover {
  /*height: 205px;*/
  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body9 {
  height: 130px;
  width: 700px;
  margin-left: 190px;
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.container_body9:hover {

  box-shadow: 0 2px 30px rgb(69, 176, 255);
}

.container_body10 {
  height: 370px;
  width: 380px;
  margin-right: 100px;
  /*margin-right:60px;*/
  /*background-color: white;*/
  /*padding: 20px;*/
  margin-bottom: 20px;
}

.el-icon-more {
  font-size: 35px;
  color: #000000;
  margin-left: 390px;
  margin-top: 20px;
}

</style>
<style>
.el-calendar-table .el-calendar-day {
  height: 36px !important;
  /*width: 40px!important;*/

  color: #C0C4CC;
}

.el-calendar {
  width: 410px !important;
  margin-right: 50px !important;
  /*background-color:transparent!important;*/
}
</style>
<!--图片按钮有关-->
<style>
.num {
  font-size: 13px;
  color: #999;
  text-align: right;
  margin: 10px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 126%;
  height: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
